import React, { Component } from 'react'
import { Card, Table, Badge,Modal,message,Button} from 'antd'
import axios from './../../axios'
export default class BasicTable extends Component {

    state={}
    params = {
        page: 2
    }
    componentDidMount(){
        this.request();
    }
    request = () => {
        axios.ajax({
            url: '/table/high/list',
            data: {
                params: {
                    page: this.params.page
                },
                isShowLoading: true
            }
        }).then((res) => {
            if (res.code === 0) {
                res.result.list.map((item, index) => {
                    item.key = index;
                    return item;
                })
                this.setState({
                    dataSource: res.result.list
                })
            }
        })
    }
    handleChange=(pagination,filters,sorter)=>{
        this.setState({
            sortOrder:sorter.order
        })
    }
    handleDelete=(item)=>{
        Modal.confirm({
            title:"确认",
            content:"确认删除么",
            onOk:()=>{
                message.success("删除成功");
                this.request()
            }
        })
    }
    render() {
        const columns = [
            {
                title: 'id',
                width:80,
                dataIndex: 'id'
            },
            {
                title: '用户名',
                width: 80,

                dataIndex: 'username'
            }, {
                width:80,
                title: '性别',
                dataIndex: 'sex',
                render(sex) {
                    return sex === "1" ? "男" : "女"
                }
            }, {
                width: 80,
                title: '状态',
                dataIndex: 'state',
                render(state) {
                    let config = {
                        '1': "登陆",
                        '2': '退出',
                        '3': '注册',
                        '4': '验证',
                        '5': "失败"
                    }
                    return config[state];
                }
            }, {
                width: 80,
                title: '爱好',
                dataIndex: 'interest',
                render(abx) {
                    let config = {
                        '1': "游泳",
                        '2': "滑雪",
                        '3': "跑步",
                        '4': "踢球",
                        '5': "乒乓球",
                        '6': "跳绳",
                        '7': "桌球",
                        '8': "骑车",
                    }
                    return config[abx]
                }
            }, {
                width: 120,
                title: '生日',
                dataIndex: 'birthday'
            }, {
                width: 120,
                title: '地址',
                dataIndex: 'address'
            }, {
                width:120,
                title: '早起时间',
                dataIndex: 'time'
            }
        ]
        const columns2 = [
            {
                title: 'id',
                width: 80,
                dataIndex: 'id',
                fixed:'left'
            },
            {
                title: '用户名',
                width: 80,

                dataIndex: 'username',
                fixed: 'left'
            }, {
                width: 80,
                title: '性别',
                dataIndex: 'sex',
            
                render(sex) {
                    return sex === "1" ? "男" : "女"
                }
            }, {
                width: 80,
                title: '状态',
                dataIndex: 'state',
                render(state) {
                    let config = {
                        '1': "登陆",
                        '2': '退出',
                        '3': '注册',
                        '4': '验证',
                        '5': "失败"
                    }
                    return config[state];
                }
            }, {
                width: 80,
                title: '爱好',
                dataIndex: 'interest',
                render(abx) {
                    let config = {
                        '1': "游泳",
                        '2': "滑雪",
                        '3': "跑步",
                        '4': "踢球",
                        '5': "乒乓球",
                        '6': "跳绳",
                        '7': "桌球",
                        '8': "骑车",
                    }
                    return config[abx]
                }
            }, {
                width: 120,
                title: '生日',
                dataIndex: 'birthday'
            }, {
                width: 120,
                title: '地址',
                dataIndex: 'address'
            }, {
                width: 120,
                title: '早起时间',
                dataIndex: 'time', fixed: "right",
            }, {
                width: 120,
                title: '生日',
                dataIndex: 'birthday55'
            }, {
                width: 120,
                title: '生日',
                dataIndex: 'birthday444'
            }, {
                width: 120,
                title: '生日',
                dataIndex: 'birthday44'
            }, {
                width: 120,
                title: '生日',
                dataIndex: 'birthday4'
            }, {
                width: 120,
                title: '生日',
                dataIndex: 'birthday111'
            }, {
                width: 120,
                title: '生日',
                dataIndex: 'birthday11'
            }, {
                width: 120,
                title: '生日',
                dataIndex: 'birthday1'
            }, {
                width: 120,
                title: '生日',
                dataIndex: 'birthday22222'
            }, {
                width: 120,
                title: '生日',
                dataIndex: 'birthday2222'
            }, {
                width: 120,
                title: '生日',
                dataIndex: 'birthday22'
            }, {
                width: 120,
                title: '生日',
                dataIndex: 'birthday222'
            }, {
                width: 120,
                title: '生日',
                dataIndex: 'birthday2'
            },
        ]
        const columns3 = [
            {
                title: 'id',
              
                dataIndex: 'id'
            },
            {
                title: '用户名',

                dataIndex: 'username'
            }, {
                title: '性别',
                dataIndex: 'sex',
                render(sex) {
                    return sex === "1" ? "男" : "女"
                }
            }, {
                title: '年龄',
                dataIndex: 'age',
                sorter:(a,b)=>{
                    return a.age - b.age;
                },
                sortOrder:this.state.sortOrder
            }, {
                title: '状态',
                dataIndex: 'state',
                render(state) {
                    let config = {
                        '1': "登陆",
                        '2': '退出',
                        '3': '注册',
                        '4': '验证',
                        '5': "失败"
                    }
                    return config[state];
                }
            }, {
                title: '爱好',
                dataIndex: 'interest',
                render(abx) {
                    let config = {
                        '1': "游泳",
                        '2': "滑雪",
                        '3': "跑步",
                        '4': "踢球",
                        '5': "乒乓球",
                        '6': "跳绳",
                        '7': "桌球",
                        '8': "骑车",
                    }
                    return config[abx]
                }
            }, {
                title: '生日',
                dataIndex: 'birthday'
            }, {
                title: '地址',
                dataIndex: 'address'
            }, {
                title: '早起时间',
                dataIndex: 'time'
            }
        ]
        const columns4 = [
            {
                title: 'id',

                dataIndex: 'id'
            },
            {
                title: '用户名',

                dataIndex: 'username'
            }, {
                title: '性别',
                dataIndex: 'sex',
                render(sex) {
                    return sex === "1" ? "男" : "女"
                }
            }, {
                title: '年龄',
                dataIndex: 'age',
                sorter: (a, b) => {
                    return a.age - b.age;
                },
                sortOrder: this.state.sortOrder
            }, {
                title: '状态',
                dataIndex: 'state',
                render(state) {
                    let config = {
                        '1': <Badge status = 'success' text="成功 "/>,
                        '2': <Badge status='warning' text="退出 " />,
                        '3': <Badge status = 'error' text="注册 "/>,
                        '4': <Badge status='processing' text="验证 " />,
                        '5': <Badge status='default' text="失败 " />
                    }
                    return config[state];
                }
            }, {
                title: '爱好',
                dataIndex: 'interest',
                render(abx) {
                    let config = {
                        '1': "游泳",
                        '2': "滑雪",
                        '3': "跑步",
                        '4': "踢球",
                        '5': "乒乓球",
                        '6': "跳绳",
                        '7': "桌球",
                        '8': "骑车",
                    }
                    return config[abx]
                }
            }, {
                title: '生日',
                dataIndex: 'birthday'
            }, {
                title: '地址',
                dataIndex: 'address'
            }, {
                title: '操作',
                render:(text,item)=>{
                    return <Button size="small" onClick={(item) => { this.handleDelete(item) }}> 删除</Button>
                }
            }
        ]
        return (
            <div>
                <Card title="头部固定" >
                    <Table
                        //borderd控制是否显示border
                        bordered
                        pagination={false}
                        columns={columns}
                        dataSource={this.state.dataSource}
                        scroll={{y:200}}
                    >

                    </Table>
                </Card>
                <Card title="左侧固定">
                    <Table
                        bordered
                        pagination={false}
                        columns={columns2}
                        dataSource={this.state.dataSource}
                        scroll={{ x: 2200 }}
                    >

                    </Table>
                </Card>
                <Card title="表格排序">
                    <Table
                        bordered
                        pagination={false}
                        columns={columns3}
                        dataSource={this.state.dataSource}
                        onChange={this.handleChange}
                    >

                    </Table>
                </Card>
                <Card title="操作按钮">
                    <Table
                        bordered
                        pagination={false}
                        columns={columns4}
                        dataSource={this.state.dataSource}
                        
                    >

                    </Table>
                </Card>
            </div>
        )
    }
}
